<template>
  <div class="container">
    <div class="seachAndState">
      <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="时间粒度">
          <el-select v-model="formInline.time" placeholder="选择时间段">
            <el-option label="分钟" value="Min"></el-option>
            <el-option label="十分钟" value="Ten"></el-option>
            <el-option label="三十分钟" value="Thirty"></el-option>
            <el-option label="一小时" value="Hour"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formInline.time !== 'Min'" label="数据">
          <el-select v-model="formInline.data" placeholder="选择时间段">
            <el-option label="平均值" value="平均值"></el-option>
            <el-option label="最小值" value="最小值"></el-option>
            <el-option label="最大值" value="最大值"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="formInline.timeLine" type="datetimerange" :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getAllData(onGetData, 'notChangePage')">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="stateClass">
        状态:
        <div :class="judgeState ? 'greenLight' : 'redLight'"></div>
        <div style="font-size: 0.9rem; margin-top: 3px">
          {{ this.deviceStatus }}
        </div>
      </div>
    </div>
    <el-table :header-cell-style="getRowClass" :data="tableData" style="width: 100%">
      <el-table-column fixed align="center" label="工艺名称" :width="tableData[0]?90:'' ">
        坩埚
      </el-table-column>

      <!-- <div v-if="control.show">
        <el-table-column fixed align="center" label="时间" :width="tableData[0]?100:'' ">
          <template slot-scope="{row}">
            <div>
              {{ row.createTime }}
            </div>
          </template>
        </el-table-column>
      </div> -->
      <el-table-column fixed align="center" label="时间" :width="tableData[0]?100:'' ">
        <template slot-scope="{ row }">
          {{ row.createTime }}
        </template>
      </el-table-column>
      <div v-if="tableData.length !== 0">
        <div v-if="control.show">
          <div v-if="status=='min'">
            <el-table-column align="center" v-for="(item, index) in tableData[0].min" :key="item.key" width="120">
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.min[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
          <div v-if="status=='max'">
            <el-table-column align="center" v-for="(item, index) in tableData[0].max" :key="item.key" width="120">
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.max[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
          <div v-if="status=='avg'">
            <el-table-column align="center" v-for="(item, index) in tableData[0].avg" :key="item.key" width="120">
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.avg[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
        </div>
        <!-- 分钟的 -->
        <div v-else>
          <el-table-column align="center" v-for="(item, index) in tableData[0].data" :key="item.key" width="120">
            <template slot="header" slot-scope="">
              <div class="tableHead">{{ item.key }}</div>
              <div class="tableHead">({{ item.unit }})</div>
            </template>
            <template slot-scope="{ row }">
              <div>
                {{ row.data[index].value }}
              </div>
            </template>
          </el-table-column>
        </div>
      </div>
    </el-table>
    <div class="block" style="display: flex; flex-direction: row-reverse; margin-top: 10px">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currPage" :page-sizes="[10, 20, 30, 40]" :currPage-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { crucibleDataGet, crucibleDataGetAllData } from '@/api/crucible.js'

export default {
  name: 'steepContent',
  data () {
    return {
      pageSize: 10,
      currPage: 1,
      total: null,
      interval: '',
      deviceTypeId: '61d986ebfca8f66ec93084ad',
      control: {
        data: '',
        show: false
      },
      status: '',
      formInline: {
        data: '平均值',
        time: 'Min',
        timeLine: null
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      tableData: [],
      deviceStatus: null
    }
  },
  created () {},
  mounted () {
    this.getAllData()
  },
  computed: {
    judgeState () {
      if (this.deviceStatus === '正常') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    onGetData (res) {
      const test = res.code === 200 ? '查询成功' : '暂无数据'
      this.$message({
        customClass: 'mess-info',
        message: test
      })
    },
    getAllData (onGetData, ret) {
      const that = this
      if (that.formInline.timeLine === null) { that.formInline.timeLine = ['', ''] }
      if (ret === 'notChangePage') {
        this.currPage = 1
      }
      const params = {
        BoxId: '2da580adb26b4a12accd4aec80e04656',
        pageSize: that.pageSize,
        currPage: that.currPage,
        dataTime: that.formInline.time,
        startTime: that.formInline.timeLine[0],
        endTime: that.formInline.timeLine[1]
      }
      console.log(params)
      if (that.formInline.time === 'Min') {
        that.control.show = false
        crucibleDataGet(params)
          .then((res) => {
            console.log(res)
            if (res.data.code === 200) {
              console.log(res.data)
              console.log(that.control.show)
              that.tableData = res.data.data.dataSet
              console.log(that.tableData, '111')
              that.total = res.data.data.totalCount
              that.deviceStatus = res.data.data.deviceStatus
            } else {
              that.tableData = []
              that.total = 0
            }
            if (onGetData) onGetData(res.data)
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        that.tableData = []
        that.control.show = true
        if (this.formInline.time === 'Ten') {
          that.interval = 10
        } else if (this.formInline.time === 'Thirty') {
          that.interval = 30
        } else if (this.formInline.time === 'Hour') {
          that.interval = 60
        }
        const params1 = {
          code: '9bd62f734af94dc0b0641817ac2807e9',
          interval: that.interval,
          pageSize: that.pageSize,
          currPage: that.currPage,
          startTime: that.formInline.timeLine[0],
          endTime: that.formInline.timeLine[1]
        }
        crucibleDataGetAllData(params1).then((res) => {
          that.tableData = res.data.data.data
          console.log(that.tableData, '111')
          if (this.formInline.data === '最小值') {
            that.status = 'min'
            // res.data.data.data.forEach(item => {
            //   that.tableData1.push(item.min)
            // })
            // console.log(that.tableData1, 'min')
            that.total = res.data.data.count
            if (res.statusText === 'OK') {
              that.deviceStatus = '正常'
            }
          } else if (this.formInline.data === '最大值') {
            that.status = 'max'
            // res.data.data.data.forEach(item => {
            //   that.tableData1.push(item.max)
            // })
            // console.log(that.tableData1, 'max')
            that.total = res.data.data.count
            if (res.statusText === 'OK') {
              that.deviceStatus = '正常'
            }
          } else if (this.formInline.data === '平均值') {
            that.status = 'avg'
            // res.data.data.data.forEach(item => {
            //   that.tableData1.push(item.avg)
            // })
            // console.log(that.tableData1, 'avg')
            that.total = res.data.data.count
            if (res.statusText === 'OK') {
              that.deviceStatus = '正常'
            }
          }
        })
        // this.tableData = [],
        //   this.total = 0,
        //     this.$message({
        //       customClass: "mess-info",
        //       message: "暂无数据",
        //     })
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getAllData()
    },
    handleCurrentChange (val) {
      this.currPage = val
      this.getAllData()
    }
  }
}
</script>

<style  scoped>
 .el-pager .active {
  background-color: $primary !important;
}
 .el-table .el-table__cell {
  padding: 4px 0;
}
.container {
  .seachAndState {
    display: flex;
    justify-content: space-between;
    .stateClass {
      display: flex;
      height: 100%;
      padding: 5px 10px 10px 20px;
      width: 200px;
      .greenLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(133, 231, 163);
        border-radius: 0.4rem;
        border: 1px solid rgba(41, 241, 101, 0.349);
      }
      .redLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(219, 99, 99);
        border-radius: 0.4rem;
        border: 1px solid rgba(241, 148, 41, 0.349);
      }
    }
  }
}
</style>
